﻿@{
    Layout = "~/Areas/Web/Views/Shared/_UserCenter.cshtml";
    ViewBag.Title = "收货地址管理";
}
@model IEnumerable<Himall.Model.ShippingAddressInfo>
<link href="~/Areas/Web/Content/base.css" rel="stylesheet" />
<link href="~/Areas/Web/Content/myjd.easebuy.css" rel="stylesheet" />
<div class="box1 lh24">
    <div class="title bot-border">
        <h3 class="title_txt cur">收货地址管理</h3>
    </div>

    <div class="border-box">
        <div class="mod lh24">
            <div class="pd10">
                <a href="javascript:;" class="e-btn add-btn btn-5">新增收货地址</a>
                <span class="ftx-03">您已创建<span class="ftx-02" id="addressNum_top">@Model.Count() </span>个收货地址，最多可创建<span class="ftx-02">20</span>个</span>
            </div>
            <div class="mc pd10" id="order_box">
                @foreach (var m in Model)
                {
                    var quick = m.IsQuick;
                    var defaultquick = quick ? "default-address" : "";
                    bool isdefault = m.IsDefault;

                    <div id="@m.Id" class="sm easebuy-m">
                        <div class="smt">
                            <h3>
                                <span class="ftx-02 mr10" style="display:none;">轻松购</span>
                                @m.ShipTo
                            </h3>
                            <div class="extra">
                                <a class="btn-9 default-address @(isdefault?"hide":"")" href="javascript:;" data-id="@m.Id">设为默认</a>
                                <a class="btn-9 id_edit" href="javascript:;" data="@m.Id">编辑</a>
                                <a class="btn-9 del" href="javascript:;" data-tag="@m.Id">删除</a>
                            </div>
                        </div>
                        <div class="smc">
                            <div class="items new-items">
                                <div class="item-lcol">
                                    <div class="item">
                                        <span class="label">收货人：</span>
                                        <div class="fl">@m.ShipTo</div>
                                        <span class="clr"></span>
                                    </div>
                                    <div class="item">
                                        <span class="label">所在地区：</span>
                                        <div class="fl" data="@m.RegionIdPath">@m.RegionFullName</div>
                                        <span class="clr"></span>
                                    </div>
                                    <div class="item">
                                        <span class="label">地址：</span>
                                        <div class="fl">@m.Address</div>
                                        <span class="clr"></span>
                                    </div>
                                    <div class="item">
                                        <span class="label">手机号码：</span>
                                        <div class="fl">@m.Phone</div>
                                        <span class="clr"></span>
                                    </div>
                                </div>
                                <div class="item-rcol">
                                    <div class="extra">
                                        <a class="btn-5 update-eshop e-btn" data="@m.Id" style="display:none;">升级为轻松购</a>

                                    </div>
                                </div>
                                <div class="clr"></div>
                            </div>
                        </div>
                    </div>
                }
            </div>
        </div>
    </div>

</div>


<div id="" class="thickdiv hide"></div>

<div id="order_edit" class="thickbox hide" style="left: 566.5px; top: 0px;">
    <div class="thickwrap">
        <div id="" class="thicktitle">
            <span>新增收货地址</span>
        </div>
        <div style="width: 450px; padding-left: 10px; padding-right: 10px;" id="" class="thickcon">
            <div id="addressDiagDiv">
                <input type="hidden" value="false" id="isDefault">
                <input type="hidden" value="0" id="update_paymentId">
                <input type="hidden" value="0" id="update_pickId">
                <input type="hidden" value="" id="update_pickName">
                <div id="edit-cont" class="m">
                    <div class="mc">
                        <div class="form">
                            <div class="item">
                                <span class="label"><em>*</em>收货人：</span>
                                <div class="fl">
                                    <input type="text" class="text" value="" id="consigneeName">
                                    <span class="error-msg hide" id="consigneeNameNote">请您填写收货人姓名</span>
                                </div>
                                <div class="clr"></div>
                            </div>
                            <div class="item">
                                <span class="label"><em>*</em>所在地区：</span>
                                <div class="fl">
                                    <select class="sele" id="provinceDiv">
                                        <option value="0">请选择</option>
                                    </select>
                                    <select class="sele" id="cityDiv">
                                        <option value="0">请选择</option>
                                    </select>
                                    <select class="sele" id="countyDiv">
                                        <option value="0">请选择</option>
                                    </select>

                                    <span id="areaNote" class="error-msg  hide">请您填写完整的地区信息</span>
                                </div>

                                <div class="clr"></div>
                            </div>
                            <div class="item">
                                <span class="label"><em>*</em>详细地址：</span>
                                <div class="fl">
                                    <span id="areaName" style="float: left;margin-right: 5px;line-height:32px;">
                                        <span></span><span></span><span></span>
                                    </span>
                                    <input type="text" class="text text1" value="" id="consigneeAddress">
                                </div>
                                <span id="consigneeAddressNote" class="error-msg hide">请您填写收货人详细地址</span>
                                <div class="clr"></div>
                            </div>
                            <div class="item">
                                <div class="fl">
                                    <span class="label"><em>*</em>手机号码：</span>
                                    <input type="text" class="text" maxlength="20" value="" id="consigneeMobile">
                                    <span id="consigneeMobileNote" class="error-msg hide">请您填写收货人手机号码</span>
                                    <span class="clr"></span>
                                </div>
                                <div class="clr"></div>
                            </div>
                            <div class="btns">
                                <a id="id_add_order" class="e-btn btn-5 save-btn" href="javascript:;">保存收货地址</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <a id="" class="thickclose" href="#">×</a>
    </div>
</div>
<div id="id_del_ms" class="thickbox hide" style="left: 786.5px; top: 458px;">
    <div class="thickwrap">
        <div id="" class="thicktitle">
            <span>删除</span>
        </div>
        <div style="width: 300px; padding-left: 10px; padding-right: 10px;" id="" class="thickcon">
            <div class="m flexbox">
                <div class="mc">
                    <div class="tip-box icon-box">
                        <span class="warn-icon m-icon"></span>
                        <div class="item-fore">
                            <h3 class="ftx04">您确定要删除该收货地址吗？</h3>
                            <div class="op-btns">
                                <a id="id_del_c" class="btn-8">确定</a>
                                <a id="id_del_n" class="btn-9 ml10" href="javascript:void(0);">取消</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <a id="" class="thickclose" href="javascript:void(0);">×</a>
    </div>
</div>
<script src="~/Scripts/Region.js"></script>
<script>
    (function ($) {

        var regEmpty = /\w+/g,
            number = ($('.easebuy-m').length),
            checkNumber = function (n) {
                if (n >= 20) {
                    return true;
                }
            },
            regTel = /([\d]{11})|(^0[\d]{2,3}-?[\d]{7,8}$)/;
        $('#ordermethod1').bind('click', function (e) {
            $(this).addClass('order-method-selected');
            $(this).attr('data-tag', 1);
            $('#ordermethod0').removeClass('order-method-selected').attr('data-tag', 0);
        });
        $('#ordermethod0').bind('click', function (e) {
            $(this).addClass('order-method-selected');
            $(this).attr('data-tag', 1);
            $('#ordermethod1').removeClass('order-method-selected').attr('data-tag', 0);
        });
        $('#id_del_c').bind('click', function (e) {
            var n = $(this).attr('data-del');
            if (n) {
                $('.thickdiv').hide();
                $('#id_del_ms').hide();
                var loading = showLoading();
                $.ajax({
                    type: 'post',
                    url: "@Url.Action("DeleteShippingAddress")",
                    dataType: 'json',
                    data: { id: n },
                    success: function (d) {
                        loading.close();
                        if (d.success) {
                            $('#' + n).remove();
                            $('#addressNum_top,#addressNum_bottom').html($('.easebuy-m').length);
                            number = $('.easebuy-m').length;
                        }
                        else {
                            $.dialog.errorTips('删除失败,' + d.msg);
                        }
                    }
                });
            }
        });
        $('#id_del_n,.thickclose').bind('click', function (e) {
            $('#id_del_ms').hide();
            $('#order_edit').hide();
            $('.thickdiv').hide();
            data = {};
            arr = [];
            $('#consigneeName').val('');
            $('#consigneeAddress').val('');
            $('#consigneeMobile').val('');
            $('#areaName').html('');
            $('#id_add_order').attr('data', '');
            $('#order_edit').hide();
            $('.thickdiv').hide();
        });
        arr = [];
        data = {};
        $('#id_payment_c').bind('click', function (e) {
            //
        });
        city = [];
        var provinceDiv = $('#provinceDiv');
        var cityDiv = $('#cityDiv');
        var countyDiv = $('#countyDiv');
        var areaName = $('#areaName');
        var createElem = function (data, elem, id) {
            if (!data) { return; }
            for (var i = 0, e; e = data[i++];) {
                if (id) {
                    elem.append('<option value="' + e.id + '" data="' + id + '">' + e.name + '</option>');
                } else {
                    elem.append('<option value="' + e.id + '">' + e.name + '</option>');
                }
            }
        };
        createElem(province, provinceDiv);

        var fnSelect = function (data, val, tag) {
            if (!data) { return; }
            for (var i = 0, e; e = data[i++];) {
                if (e.id == val) {
                    return e[tag];
                }
            }
        };
        provinceDiv.change(function (e) {
            var t = e.target,
                id = $(this).val(),
                city;
            if (id != 0) {
                city = fnSelect(province, id, 'city');
                cityDiv.html('<option value="0">请选择</option>');
                countyDiv.html('<option value="0">请选择</option>');
                createElem(city, cityDiv, id);
                areaName.find('span').eq(0).html($(this).find("option:selected").html() + '&nbsp;');
                areaName.find('span').eq(1).html('');
                areaName.find('span').eq(2).html('');
            }
            return false
        });
        cityDiv.change(function (e) {
            var t = e.target,
                id = $(this).val(),
                tag,
                city,
                county;
            if (id != 0) {
                tag = $(this).find("option:selected").attr('data');
                city = fnSelect(province, tag, 'city');
                county = fnSelect(city, id, 'county');
                countyDiv.html('<option value="0">请选择</option>');
                createElem(county, countyDiv);
                areaName.find('span').eq(1).html($(this).find("option:selected").html() + '&nbsp;');
                areaName.find('span').eq(2).html('');
            }
        });
        countyDiv.change(function (e) {
            var id = $(this).val();
            if (id != 0) {
                areaName.find('span').eq(2).html($(this).find("option:selected").html());
            }
        });
        $('.add-btn').each(function (i, e) {

            $(e).bind('click', function () {
                if (checkNumber(number)) {
                    $.dialog.errorTips('最多只能创建20个收货地址！');
                    return;
                }
                var left, top, width, height;
                left = $(window).width() / 2;
                top = $(window).height() / 2;
                width = $('.thickbox').width() / 2;
                height = $('.thickbox').height() / 2;
                $('.thickdiv').show();
                $('#order_edit .thicktitle').text('新增收货地址');
                $('#order_edit').css({ top: '50%', left: '50%', marginLeft: '-' + width + 'px', marginTop: '-' + height + 'px', position: 'fixed' }).show();

                provinceDiv.children().each(function (i, e) {
                    if (i == 0) { e.selected = true }
                });
                cityDiv.children().each(function (i, e) {
                    if (i == 0) { e.selected = true }
                });
                countyDiv.children().each(function (i, e) {
                    if (i == 0) { e.selected = true }
                });

                $("#consigneeName").focus();
            });
        });
        var getOption = function (elem, bool) {
            var s, t;
            if (bool) {
                elem.children().each(function (i, e) {
                    s = e.selected;
                    if (s == true) {
                        t = $(e).html();
                        if (t == '请选择') {
                            t = '';
                        }
                        return;
                    }
                });
            } else {
                elem.children().each(function (i, e) {
                    s = e.selected;
                    if (s == true) {
                        t = $(e).val();
                        return;
                    }
                });
            }
            return t;
        };
        //判断是否选择地区
        var isSelectAddr = function (p, c, t) {
            if (!p || !c || !t)
                return false;
            var haveProvince = false;
            var haveCity = false;
            var haveTown = false;
            p.children().each(function (i, e) {
                s = e.selected;
                if (s == true && i > 0) {
                    haveProvince = true;
                    return;
                }
            });
            if (haveProvince) {
                c.children().each(function (i, e) {
                    s = e.selected;
                    if (s == true && i > 0) {
                        haveCity = true;
                        return;
                    }
                });
                if (haveCity) {
                    var idx = 0;
                    t.children().each(function (i, e) {
                        s = e.selected;
                        idx = i;
                        if (s == true && i > 0) {
                            haveTown = true;
                            return;
                        }
                    });
                    haveTown = idx > 0 ? haveTown : true;
                }
            }
            return haveProvince && haveCity && haveTown;
        };
        $('#consigneeName').blur(function () {
            var str = $.trim($(this).val());
            if (str) {
                $('#consigneeNameNote').hide();
            } else {
                $('#consigneeNameNote').show();
            }
        });
        $('#consigneeAddress').blur(function () {
            var str = $(this).val();
            if (str) {
                $('#consigneeAddressNote').hide();
            } else {
                $('#consigneeAddressNote').show();
            }
        });
        $('#consigneeMobile').blur(function () {
            var str = $(this).val(),
                bool = regTel.test(str);
            if (bool) {
                $('#consigneeMobileNote').hide();
            } else {
                $('#consigneeMobileNote').show();
            }
        });
        $('#id_add_order').bind('click', function () {
            var consigneeName = $.trim($('#consigneeName').val()),
                provinceid = getOption($('#provinceDiv'), 0),
                province = getOption($('#provinceDiv'), 1),
                cityid = getOption($('#cityDiv'), 0),
                city = getOption($('#cityDiv'), 1),
                countyid = getOption($('#countyDiv'), 0),
                county = getOption($('#countyDiv'), 1),
                consigneeAddress = $('#consigneeAddress').val(),
                consigneeMobile = $('#consigneeMobile').val(),
                consigneePhone = $('#consigneePhone').val(),
                consigneeEmail = $('#consigneeEmail').val(),
                consigneeAlias = $('#consigneeAlias').val(),
                bool = ($(this).attr('data')) ? $(this).attr('data').split(',') : '',
                valArr = [consigneeName, province + ' ' + city + ' ' + county, consigneeAddress, consigneeMobile, '', ''];
            if (consigneeName) {
                $('#consigneeNameNote').hide();
            } else {
                $('#consigneeNameNote').show();
                return;
            }

            if ($.trim(consigneeName).length == 0) {
                $('#consigneeNameNote').show();
                return;
            }
            if ($.trim(consigneeAddress).length == 0) {
                $('#consigneeAddressNote').show();
                return;
            }
            if (consigneeAddress) {
                $('#consigneeAddressNote').hide();
            } else {
                $('#consigneeAddressNote').show();
                return;
            }
            /*
            if ((provinceid == '0') || (cityid == '0') || (countyid == '0')) {
                $('#areaNote').show();
                return;
            } else {
                $('#areaNote').hide();
            }*/
            if (!isSelectAddr($('#provinceDiv'), $('#cityDiv'), $('#countyDiv'))) {
                $('#areaNote').show();
                return;
            }
            else {
                $('#areaNote').hide();
            }
            if (!regTel.test(consigneeMobile)) {
                $('#consigneeMobileNote').show();
                return;
            } else {
                $('#consigneeMobileNote').hide();
            }


            // ----------------------  添加收货地址
            if (1 && (!bool[0])) {
                var loading = showLoading();
                $.ajax({
                    type: 'post',
                    url: "@Url.Action("AddShippingAddress")",
                    dataType: 'json',
                    data: { RegionId: countyid == '0' ? cityid : countyid, Address: consigneeAddress, Phone: consigneeMobile, ShipTo: consigneeName },
                    success: function (d) {
                        loading.close();
                        if (d.success) {
                            $('#order_box').prepend('<div class="sm easebuy-m" id="' + d.id + '"><div class="smt"><h3><span class="ftx-02 mr10" style="display:none;">轻松购</span>' + consigneeName + '</h3><div class="extra"><a class="btn-9 default-address" href="javascript:;" data-id="' + d.id + '">设为默认</a><a href="javascript:;" class="btn-9 id_edit" data="' + d.id + '">编辑</a><a data-tag="' + d.id + '" href="javascript:;" class="btn-9 del" id="' + d.id + '">删除</a></div></div><div class="smc"><div class="items new-items"><div class="item-lcol"><div class="item"><span class="label">收货人：</span><div class="fl">' + consigneeName + '</div><span class="clr"></span></div><div class="item"><span class="label">所在地区：</span><div class="fl" data="' + provinceid + ',' + cityid + ',' + countyid + '">' + province + ' ' + city + ' ' + county + '</div><span class="clr"></span></div><div class="item"><span class="label">地址：</span><div class="fl">' + consigneeAddress + '</div><span class="clr"></span></div><div class="item"><span class="label">手机：</span><div class="fl">' + consigneeMobile + '</div><span class="clr"></span></div></div><div class="item-rcol"><div class="extra"><a data="' + d.id + '" class="btn-5 update-eshop e-btn" style="display:none;">升级为轻松购</a></div></div><div class="clr"></div></div></div></div>');
                            $('#addressNum_top,#addressNum_bottom').html($('.easebuy-m').length);
                            number = $('.easebuy-m').length;
                        }
                    }
                });

            }
            // ----------------------  编辑收货地址
            if (1 && bool[0]) {
                var loading = showLoading();
                $.ajax({
                    type: 'post',
                    url: "@Url.Action("EditShippingAddress")",
                    dataType: 'json',
                    data: { id: bool[1], RegionId: countyid == '0' ? cityid : countyid, Address: consigneeAddress, Phone: consigneeMobile, ShipTo: consigneeName },
                    success: function (d) {
                        loading.close();
                        if (d.success) {
                            $('#' + bool[1] + ' h3').html('<span class="ftx-02 mr10">轻松购</span>' + consigneeName);
                            $('#' + bool[1] + ' .item-lcol').children().each(function (i, e) {
                                $(e).children().filter('.fl').html(valArr[i]);
                                var elData = $(e).children().filter('.fl[data]');
                                if (elData.length > 0) {
                                    if (countyid == '0') {
                                        elData.attr('data', provinceid + ',' + cityid);
                                    }
                                    else {
                                        elData.attr('data', provinceid + ',' + cityid + ',' + countyid);
                                    }
                                }

                            });
                        }
                    }
                });
            }
            data = {};
            arr = [];
            $('#consigneeName').val('');
            $('#consigneeAddress').val('');
            $('#consigneeMobile').val('');
            $('#areaName').html('<span></span>&nbsp;<span></span>&nbsp;<span></span>');
            $('#id_add_order').attr('data', '');
            $('#order_edit').hide();
            $('.thickdiv').hide();
            provinceDiv.children().each(function (i, e) {
                if (i == 0) { e.selected = true }
            });
            cityDiv.children().each(function (i, e) {
                if (i == 0) { e.selected = true }
            });
            countyDiv.children().each(function (i, e) {
                if (i == 0) { e.selected = true }
            });
        });
        $('#order_box').bind('click', function (e) {

            var a = e.target,
                left, top, width, height,
                cla = $(a).hasClass('update-eshop'),
                setdefault = $(a).hasClass('default-address'),
                del = $(a).hasClass('del'),
                edit = $(a).hasClass('id_edit');
            if (cla) {
                var dom = $(a),
                a = dom.attr('data').split(',');
                $('.update-eshop').each(function () {
                    $(this).show();
                });

                $(e.target).hide();
                // ----------------------  升级轻松购
                var loading = showLoading();
                $.ajax({
                    type: 'post',
                    url: "@Url.Action("SetQuickShippingAddress")",
                    data: { id: a[0] },
                    dataType: 'json',
                    success: function (d) {
                        loading.close();
                        if (d.success) {
                            $('.update-eshop').each(function () {
                                $(this).show();
                            });
                            $('.default-address').removeClass('default-address');
                            //$('#' + a[0]).children().first().find('h3').prepend('<span class="ftx-02 mr10" style="line-height:20px;">轻松购</span>');
                            $('#' + a[0]).children().first().children().last().children().filter('.id_edit').attr('data-q', 1);
                            $('#' + a[0]).addClass('default-address');
                            $(e.target).hide();
                        }
                    }
                });
            }
            if (setdefault) {
                var dom = $(a),
                did = dom.data('id');
                $('.default-address').each(function () {
                    $(this).show();
                });

                $(e.target).hide();
                // ----------------------  升级轻松购
                var loading = showLoading();
                $.ajax({
                    type: 'post',
                    url: "@Url.Action("SetDefaultShippingAddress")",
                    data: { id: did },
                    dataType: 'json',
                    success: function (d) {
                        loading.close();
                        if (d.success) {
                            $('.default-address').each(function () {
                                $(this).show();
                            });
                            //$('.default-address').removeClass('default-address');
                            //$('#' + a[0]).children().first().find('h3').prepend('<span class="ftx-02 mr10" style="line-height:20px;">轻松购</span>');
                            //$('#' + a[0]).children().first().children().last().children().filter('.id_edit').attr('data-q', 1);
                            //$('#' + a[0]).addClass('default-address');
                            $(e.target).hide();
                        }
                    }
                });
            }
            if (del) {
                left = $(window).width();
                top = $(window).height();
                width = $('#id_del_ms').width();
                height = $('#id_del_ms').height();
                $('.thickdiv').show();
                $('#id_del_c').attr('data-del', $(a).attr('data-tag'));
                $('#id_del_ms').css({ top: ((top - height) / 2) + 'px', left: ((left - width) / 2) + 'px', position: 'fixed' }).show();
            }
            if (edit) {
                var dom = $(a),
                    s = dom.attr('data'),
                    q = dom.attr('data-q'),
                    strArr = ['consigneeAlias', 'consigneeName', 'city', 'areaName', 'consigneeAddress', 'consigneeMobile', 'consigneePhone', 'consigneeEmail'], consigneeAlias;
                if (s) {
                    consigneeAlias = $('#' + s).children().first().find('h3').text();
                    arr.push(consigneeAlias);
                } else {
                    consigneeAlias = $('#' + s).children().first().find('h3').text();
                    arr.push(consigneeAlias);
                }
                $('#' + s + ' .item').each(function (i, s) {
                    if ($($(s).children()[1]).attr('data')) {
                        arr.push($($(s).children()[1]).attr('data'));
                        arr.push($(s).children()[1].innerHTML);
                    } else {
                        arr.push($(s).children()[1].innerHTML);
                    }
                });
                for (var i = 0, o, num = 0; o = arr[i++];) {
                    data[strArr[num++]] = o;
                }
                $('#consigneeName').val(data.consigneeName);
                $('#consigneeAddress').val(data.consigneeAddress);
                $('#consigneeMobile').val(data.consigneeMobile);
                $('#order_edit .thicktitle').text('编辑收货地址');
                var areaArr = data.areaName.split(' ');
                areaArr[2] = areaArr[2] || '';
                $('#areaName').html('<span>' + areaArr[0] + '&nbsp;</span>' + '<span>' + areaArr[1] + '&nbsp;</span>' + '<span>' + areaArr[2] + '&nbsp;</span>');
                $('#id_add_order').attr('data', 1 + ',' + s + (q ? (',' + q) : ''));
                var parr = data.city.split(','),
                    pid = parr[0],
                    cid = parr[1],
                    cuid = parr[2];
                $('#provinceDiv').children().each(function () {
                    if ($(this).val() == pid) {
                        $(this).attr('selected', true);
                        city = fnSelect(province, pid, 'city');
                        cityDiv.html('<option value="0">请选择</option>');
                        countyDiv.html('<option value="0">请选择</option>');
                        createElem(city, cityDiv, pid);
                        $('#cityDiv').children().each(function () {
                            if ($(this).val() == cid) {
                                $(this).attr('selected', true);
                                city = fnSelect(province, pid, 'city');
                                county = fnSelect(city, cid, 'county');
                                countyDiv.html('<option value="0">请选择</option>');
                                createElem(county, countyDiv);
                                $('#countyDiv').children().each(function () {
                                    if ($(this).val() == cuid) {
                                        $(this).attr('selected', true);
                                    }
                                });
                                return;
                            }
                        });
                        return;
                    }
                });
                left = $(window).width() / 2;
                top = $(window).height() / 2;
                width = $('.thickbox').width() / 2;
                height = $('.thickbox').height() / 2;
                $('.thickdiv').show();
                $('#order_edit').css({ top: '50%', left: '50%', marginLeft: '-' + width + 'px', marginTop: '-' + height + 'px', position: 'fixed' }).show();
            }
        });
    }(jQuery));

</script>
